<template>
	<view class="details">
		<!-- 大头像背景 -->
		<image :src="baseUrl+data.details.header" style="width: 100%;height: 500rpx;" mode="widthFix"></image>
		<!-- 基础资料 -->
		<view class="basics">
			<!-- 头像 -->
			<view class="header">
				<image :src="baseUrl+data.details.header" style="width: 100rpx;height: 100rpx;border-radius: 50%;" mode="widthFix"></image>
			</view>
			<view class="basics_info">
				<view>{{data.details.nickname}}</view>
				<view style="width: 100rpx">
					<u-button size="mini" :text="data.details.follow==0?'关注':'已关注'" :icon="data.details.follow==0?'heart':'heart-fill'"
					 @click="clickFollow(data.details.id)" shape="circle" plain :color="data.details.follow==0?'#56b4e5':'#fb90a6'"></u-button>
				</view>
			</view>
		</view>
		<!-- 内心独白 -->
		<view class="details_infoBox">
			<view class="details_title" >内心独白</view>
			<view class="details_content">
				<u-read-more v-if="data.details.info" toggle showHeight="50">  
					<rich-text :nodes="data.details.info"></rich-text>
				</u-read-more>
			</view>
		</view>
		<!-- 个人资料 -->
		<view class="details_infoBox">
			<view class="details_title" >
				个人资料
				<text style="color: #ccc;font-weight: normal;">ID:({{data.details.id}})</text>
			</view>
			<view class="details_content">
				<view class="tag_item">
					<u-tag :text="data.details.birth" plain borderColor="#ededed" size="mini" bgColor="#ededed" color="#000"></u-tag>
					<u-tag :text="data.details.marital==-1?'未婚':'已婚'" plain borderColor="#ededed" size="mini" bgColor="#ededed" color="#000"></u-tag>
					<u-tag :text="data.details.education" plain borderColor="#ededed" size="mini" bgColor="#ededed" color="#000"></u-tag>
					<u-tag :text="data.details.height+'cm'" plain borderColor="#ededed" size="mini" bgColor="#ededed" color="#000"></u-tag>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button customStyle="width:150rpx;height:25px;borderRadius: 5px;" text="我也征婚" color="#1afa29"></u-button>
			<u-button customStyle="width:150rpx;height:25px;borderRadius: 5px;" text="送礼物" @click="give" color="#1afa29"></u-button>
		</view>
		<!-- 弹出礼物 -->
		<u-popup mode="center" :round="10" :show="data.idshowPopup" @close="close">
			<view class="popup_content">
				<view class="give_list" v-for="item in giveListData" :key="item.id">
					<image :src="baseUrl+item.img" style="width: 200rpx;height: 200rpx;"></image>
					<view style="display: flex;flex-direction: column;">
						<text>{{item.name}} </text>
						<text>拥有:{{item.num}} 所需积分:{{item.integral}}</text>
						<u-number-box v-model="item.giveNum" @change="(val)=>item.giveNum=val"></u-number-box>
						<u--input placeholder="请输入留言" border="none" v-model="item.remark" @change="(val)=>item.remark=val"></u--input>
						<u-button customStyle="width:150rpx;height:25px;borderRadius: 5px;" text="赠送" @click="giveYou(item)" color="#1afa29"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { follow_addReq, follow_cancelReq, gift_sendReq, gift_typeReq, user_detailReq } from '../../api/user';
	import { reactive, ref, watchEffect } from "vue";
	import { baseUrl } from '../../utils/request';
	import { useStore } from 'vuex';
	const store=useStore()
	// 礼物列表
	const giveListData=ref([])
	// 请求礼物列表
	const giveList=async()=>{
		let res=await gift_typeReq()
		res.data.data.forEach(item=>{
			item.giveNum='1'
			item.remark=''
		})
		giveListData.value=res.data.data
	}
	// 会员详情
	const data=reactive({
		details:store.state.user.data.detailed_info,
		idshowPopup:false
	})
	// 会员id
	const userID=ref(null)
	// 添加关注
	const addFollow=async(id)=>{
		let res=await follow_addReq({id})
		if(res.data.code==0){
			store.dispatch('user/A_detailed_info',{id:userID.value})
		}
	}
	// 取消关注
	const cancelFollow=async(id)=>{
		let res=await follow_cancelReq({id})
		if(res.data.code==0){
			store.dispatch('user/A_detailed_info',{id:userID.value})
		}
	}
	// 点击关注/取消关注
	const clickFollow=(id)=>{
		if(data.details.follow==0){
			addFollow(id)
		}else{
			cancelFollow(id)
		}
	}
	// 点击送礼物
	const give=()=>{
		giveList()
		data.idshowPopup=true
	}
	// 选中要送的礼物
	const giveYou=async(item)=>{
		let res=await gift_sendReq({to_user_id:userID.value,type:item.id,num:item.giveNum,remark:item.remark})
		if(res.data.code==0){
			uni.showToast({
				title: '赠送成功',
				icon:"success"
			});
		}else{
			uni.showToast({
				title: res.data.errors,
				icon:"success"
			});
		}
		console.log(res);
	}
	// 关闭弹出层
	const close=()=>{
		data.idshowPopup=false
	}
	onLoad((option)=>{
		userID.value=option.id
		store.dispatch('user/A_detailed_info',{id:userID.value})
	})
</script>

<style lang="scss">
.details{
	height: 100%;
	background: #f3f3ed;
	.basics{
		height: 200rpx;
		background: #fff;
		display: flex;
		.header{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background: #fff;
			position: relative;
			top: -40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.basics_info{
			display: flex;
			flex: 1;
			justify-content: space-between;
			font-size: 40rpx;
			padding:20rpx;
			height: 100rpx;
			align-items: center;
		}
	}
	.details_infoBox{
		background: #fff;
		padding: 30rpx;
	}
	.details_title{
			font-weight: bold;
			border-left: 3px solid #1296da;
			padding-left: 20rpx;
	}
	.details_content{
		padding: 50rpx;
		border-top: 1rpx solid #ccc;
		margin-top: 20rpx;
	}
	.tag_item{
		display: flex;
		justify-content: space-between;
	}
	.btn{
		background: #fff;
		display: flex;
		justify-content: space-around;
		padding: 50rpx 100rpx;
	}
	.popup_content{
		width: 600rpx;
		height: 400rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}
	.give_list{
		display: flex;
		padding: 20rpx;
	}
}
</style>
